<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Along</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="echarts" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        var map = L.map('map').setView([40.86737600240287, -74.04327099998152], 9);

        initMap();

        updateView();

        function initMap() {
            L.tileLayer('https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
                    attribution: '<a href="#">MapGIS</a>',
                    maxZoom: 18,
                    id: 'mapbox.light'
                }).addTo(map);
        }

        var layer;

        var CHUNK_COUNT = 19;

        function fetchData(idx) {
            if (idx >= CHUNK_COUNT) {
                return;
            }
            var dataURL = `../../static/data/echarts/point/data_${idx}.bin`;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', dataURL, true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function (e) {
                var rawData = new Float32Array(this.response);

                layer.chart
                    .appendData({
                        seriesIndex: 0,
                        data: rawData
                    });

                fetchData(idx + 1);
            };

            xhr.send();
        }

        function updateView() {
            var option = {
                title: {
                    top: '10px',
                    text: "140万纽约出租车",
                    subtext: "数据来自纽约出租车以及Uber",
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    },
                    subtextStyle: {
                        color: '#fff'
                    }
                },
                mapleafletboxgl: {
                    roam: true
                },
                series: [{
                    type: 'scatter',
                    progressive: 1e5,
                    coordinateSystem: 'leaflet',
                    symbolSize: 0.5,
                    blendMode: 'lighter',
                    large: true,
                    itemStyle: {
                        color: '#FF3300',
                    },
                    postEffect: {
                        enable: true
                    },
                    silent: true,
                    dimensions: ['lng', 'lat'],
                    data: new Float32Array()
                }]
            };
            layer = L.zondy.EchartsLayer(map, option).addTo(map);

            fetchData(0);
        }
    </script>

</body>

</html>